<template>
  <page-body>
    <view class="page">
      <view class="flex benben-position-layout flex flex-wrap align-center personalData_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-center justify-between flex-sub personalData_fd0_0'>
          <view class='flex flex-wrap align-center personalData_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
            data-url="1">
            <text class='fu-iconfont2  personalData_fd0_0_c0_c0'>&#xE794;</text>
          </view>
          <view class='flex flex-wrap align-stretch justify-center'>
            <text class='personalData_fd0_0_c1_c0'>个人资料</text>
          </view>
          <view class='flex flex-wrap align-center justify-end personalData_fd0_0_c0'>
          </view>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---我的资料flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch">
        <view class='flex flex-direction align-stretch personalData_fd1_0'>
          <view class='flex flex-wrap align-center justify-between personalData_fd1_0_c0'>
            <text class='personalData_fd1_0_c0_c0'>头像</text>
            <benben-image-upload :path.sync="dataDetails.avatar" :img-id.sync="dataDetails.avatar" :is-cropping="true"
              :is-show-clean="false" class="upload position-relative personalData_fd1_0_c0_c1">

              <image class=" personalData_fd1_0_c0_c1" mode="aspectFit"
                :src="dataDetails.avatar ? dataDetails.avatar : STATIC_URL+'177.png'"></image>
            </benben-image-upload>
          </view>
          <view class='flex flex-wrap align-center justify-between personalData_fd1_0_c1'>
            <text class='personalData_fd1_0_c0_c0'>昵称</text>
            <benben-input class='flex-sub personalData_fd1_0_c1_c1' type="text" :placeholder="`请输入昵称`"
              confirm-type="done" :maxlength="10" placeholder-style="color:#666666;font-size:32rpx"
              v-model="dataDetails.nickname" />
          </view>
          <view class='flex flex-wrap align-center justify-between personalData_fd1_0_c1'
            @tap.stop="pickerDiy1719307399376=true">
            <text class='personalData_fd1_0_c0_c0'>性别</text>
            <benben-input class='personalData_fd1_0_c2_c1' type="text" :placeholder="`请选择性别`" confirm-type="done"
              :maxlength="-1" :disabled='true' placeholder-style="color:rgba(102, 102, 102, 1);font-size:32rpx"
              v-model="sex" v-if="userInfo.sex=='1'" /><benben-input class='personalData_fd1_0_c2_c1' type="text"
              :placeholder="'女'" confirm-type="done" :maxlength="-1" :disabled='true'
              placeholder-style="color:rgba(102, 102, 102, 1);font-size:32rpx" v-model="sex" v-if="userInfo.sex!='1'" />
          </view>
          <view class='flex flex-wrap align-center justify-between flex-sub personalData_fd1_0_c3'
            @tap.stop="pickerDiy1719307597477=true">
            <text class='personalData_fd1_0_c0_c0'>生日</text>
            <benben-input class='flex-sub personalData_fd1_0_c2_c1' type="text" :placeholder="`请选择生日`"
              confirm-type="done" :maxlength="-1" :disabled='true'
              placeholder-style="color:rgba(102, 102, 102, 1);font-size:32rpx" v-model="dataDetails.birthday" />
          </view>
        </view>
        <view class='flex flex-wrap align-center justify-center personalData_fd1_1'>
          <button class='personalData_fd1_1_c0' @tap.stop="editUserFunc()">保存</button>
        </view>
        <view class='flex flex-direction align-stretch personalData_fd1_2' @click.stop="goAuth">
          <view class='flex flex-wrap align-center justify-between flex-sub personalData_fd1_0_c3'>
            <text class='personalData_fd1_0_c0_c0'>企业认证</text>
            <text class='personalData_fd1_2_c0_c1'>{{dataDetails.certified == '-1' ? '立刻认证' :
                                                      dataDetails.certified == 1 ? '审核中' :
                                                      dataDetails.certified == 2? '审核通过' :
                                                      dataDetails.certified == 3? '审核驳回' : ''
            }}</text>
          </view>
        </view>
      </view>

      <!---我的资料flex布局结束-->
      <!--选择性别开始 -->
      <benben-picker ref="benbenWritePickerCodepicker2" :visible.sync="pickerDiy1719307399376" :label.sync='sex'
        :value.sync='dataDetails.gender' :options='sexType' mode='selector' :mask-show='true' :timeout='true'
        :picker-height='88' default-type='value' :default-props='{"label":"name","value":"value"}'>
        <template #picker-header>
          <view class='flex flex-wrap align-center justify-between personalData_picker2_0'>
            <text class='personalData_picker2_0_c0' @tap="$refs.benbenWritePickerCodepicker2.cancel()">取消</text>
            <text class='personalData_picker2_0_c1'>选择性别</text>
            <text class='personalData_picker2_0_c2' @tap="$refs.benbenWritePickerCodepicker2.pickerConfirm()">确定</text>
          </view>
        </template>
      </benben-picker>
      <!--选择性别结束 -->
      <!--选择生日开始 -->
      <benben-picker ref="benbenWritePickerCodepicker3" :visible.sync="pickerDiy1719307597477"
        :value.sync='dataDetails.birthday' mode='date' :picker-height='88' :current='true' :mask-show='true'
        fields='day' :timeout='true' start-year='1990-01-01' end-year='现在'>
        <template #picker-header>
          <view class='flex flex-wrap align-center justify-between personalData_picker3_0'>
            <text class='personalData_picker3_0_c0' @tap="$refs.benbenWritePickerCodepicker3.cancel()">取消</text>
            <text class='personalData_picker3_0_c1'>选择日期</text>
            <text class='personalData_picker3_0_c2' @tap="$refs.benbenWritePickerCodepicker3.pickerConfirm()">确定</text>
          </view>
        </template>
      </benben-picker>
      <!--选择生日结束 -->


    </view>
  </page-body>
</template>
<script>
  import {
    validate
  } from '@/common/utils/validate.js'

  export default {
    components: {},


    data() {
      return {
        "pickerDiy1719307597477": false,
        "pickerDiy1719307399376": false,
        "header_img": "",
        "dataDetails": {
          "invite_code": "",
          "address": "",
          "address_code": "",
          "hobby": "",
          "tags": "",
          "id": "",
          "userlevel_id": "",
          "mobile": "",
          "real_name": "",
          "avatar": "",
          "account": "",
          "email": "",
          "birthday": "",
          "gender": "",
          "create_time": "",
          "user_money": "",
          "freeze_money": "",
          "total_consumption_money": "",
          "score": "",
          "_mobile": "",
          "coupon": "",
          "collection_count": "",
          "browse_count": "",
          "total_money": "",
          "certified": "",
          "nickname": "",
          "is_pay_password": "",
          "follow_count": ""
        },
        "sex": "",
        "sexType": [{
          "name": "保密",
          "value": "0",
          "image": ""
        }, {
          "name": "男",
          "value": "1",
          "image": ""
        }, {
          "name": "女",
          "value": "2",
          "image": ""
        }],
        "isCheck": false,
        "dataMessage": {
          "userinfo": {
            "id": "",
            "avatar": "",
            "real_name": "",
            "nickname": "",
            "email": "",
            "gender": "",
            "mobile": "",
            "birthday": "",
            "client_id": "",
            "phone": ""
          }
        }
      };
    },
    computed: {
      userInfo: {
        get() {
          return this.$store.state.userInfo
        },
        set() {
          this.$store.commit('updateUserInfo', value)
        },
      }
    },
    watch: {},
    onLoad(options) {
      this.getUserinfoFunc()
    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {

    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      goAuth() {
        uni.navigateTo({
          url: `/pages/grzx/examine/examine?certified=${this.dataDetails.certified}`
        })
      },

      //获取个人信息
      async getUserinfoFunc() {
        //请求方法
        //数据验证

        let datadataDetails = await this.$api.get(global.apiUrls.post5c78c4772da97, {

        });

        if (datadataDetails.data.code != 1) {
          this.$message.info(datadataDetails.data.msg);
          return
        }
        let infodataDetails = datadataDetails.data;
        this.dataDetails = infodataDetails.data

        if (this.dataDetails.gender == '1') {
          this.sex = '男';
        } else if (this.dataDetails.gender == '2') {
          this.sex = '女';
        } else {
          this.sex = '保密';
        }
      },
      //修改个人信息
      async editUserFunc() {
        if (this.isCheck === true) {
          return
        } else {
          this.isCheck = true;
          //请求方法
          //数据验证

          let datadataMessage = await this.$api.dbPost(global.apiUrls.post5cb54af125f1c, {
            avatar: this.dataDetails.avatar,
            nickname: this.dataDetails.nickname,
            gender: this.dataDetails.gender,
            birthday: this.dataDetails.birthday
          });
          if (!datadataMessage) return
          if (datadataMessage.data.code != 1) {
            this.$message.info(datadataMessage.data.msg);
            return
          }
          let infodataMessage = datadataMessage.data;
          this.dataMessage = infodataMessage.data

          setTimeout(() => {
            this.isCheck = false;
          }, 500)
          this.$message.info('保存成功');
          setTimeout(() => {
            this.$urouter.navigateBack(1);
          }, 800)
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: #F8F8F8;
    background-size: 100% auto;
  }

  .personalData_flex_0 {
    background: #fff;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .personalData_fd0_0_c1_c0 {
    font-size: 36rpx;
    font-weight: 700;
    color: #333;
    line-height: 88rpx;
  }

  .personalData_fd0_0_c0_c0 {
    font-size: 36rpx;
    color: #333;
  }

  .personalData_fd0_0_c0 {
    width: 120rpx;
  }

  .personalData_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .personalData_fd1_2_c0_c1 {
    color: rgba(255, 111, 2, 1);
    font-size: 32rpx;
  }

  .personalData_fd1_2 {
    background: var(--benbenbgColor1);
    padding: 0rpx 32rpx 0rpx 32rpx;
    background-size: 100% auto !important;
    margin: 0rpx 0rpx 24rpx 0rpx;
  }

  .personalData_fd1_1_c0 {
    background: var(--benbenbgColor2);
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    font-size: 32rpx;
    color: #fff;
    width: 686rpx;
    height: 88rpx;
    line-height: 88rpx;
  }

  .personalData_fd1_1 {
    position: fixed;
    left: 0rpx;
    bottom: calc(40rpx + var(--window-bottom));
    width: 750rpx;
  }

  .personalData_fd1_0_c3 {
    padding: 32rpx 0rpx 32rpx 0rpx;
  }

  .personalData_fd1_0_c2_c1 {
    font-size: 32rpx;
    font-weight: 400;
    line-height: 32rpx;
    text-align: right;
    color: rgba(102, 102, 102, 1);
  }

  .personalData_fd1_0_c1_c1 {
    text-align: right;
    font-size: 32rpx;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    margin: 0rpx 0rpx 0rpx 32rpx;
  }

  .personalData_fd1_0_c1 {
    border-bottom: 1px solid rgba(248, 248, 248, 1);
    padding: 32rpx 0rpx 32rpx 0rpx;
  }

  .personalData_fd1_0_c0_c1 {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50rpx 50rpx 50rpx 50rpx;
  }

  .personalData_fd1_0_c0_c0 {
    font-size: 32rpx;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
  }

  .personalData_fd1_0_c0 {
    border-bottom: 1px solid rgba(248, 248, 248, 1);
    line-height: 148rpx;
  }

  .personalData_fd1_0 {
    background: var(--benbenbgColor1);
    padding: 0rpx 32rpx 0rpx 32rpx;
    background-size: 100% auto !important;
    margin: 0rpx 0rpx 20rpx 0rpx;
  }

  .personalData_picker2_0_c2 {
    color: rgba(255, 111, 2, 1);
    line-height: 40rpx;
    font-size: 32rpx;
    font-weight: 500;
  }

  .personalData_picker2_0_c1 {
    font-size: 32rpx;
    font-weight: 400;
    color: #333333;
  }

  .personalData_picker2_0_c0 {
    line-height: 40rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #BFBFBF;
  }

  .personalData_picker2_0 {
    border-bottom: 1px solid #eee;
    background: #fff;
    padding: 0rpx 32rpx 0rpx 32rpx;
    line-height: 88rpx;
    border-radius: 25rpx 25rpx 0rpx 0rpx;
    background-size: 100% auto !important;
  }

  .personalData_picker3_0_c2 {
    color: rgba(255, 111, 2, 1);
    line-height: 40rpx;
    font-size: 32rpx;
    font-weight: 500;
  }

  .personalData_picker3_0_c1 {
    font-size: 32rpx;
    font-weight: 400;
    color: #333333;
  }

  .personalData_picker3_0_c0 {
    line-height: 40rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #BFBFBF;
  }

  .personalData_picker3_0 {
    border-bottom: 1px solid #eee;
    background: #fff;
    padding: 0rpx 32rpx 0rpx 32rpx;
    line-height: 88rpx;
    border-radius: 25rpx 25rpx 0rpx 0rpx;
    background-size: 100% auto !important;
  }
</style>
